<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 想要引入a。js文件 -->
    <!-- Cannot use import statement outside a module  
    不能使用 import 语句 在一个模块之外 -->
    <!-- 需要让页面中script标签成为一个模块 -->
    <script src="./14-2-a.js" type="module"></script>
    <script type="module">
        import { fn } from './14-2-b.js';
        console.log(fn);
        console.log('----fn');


        import { createApp } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.esm-browser.js'

        console.log(createApp);
    </script>
    <script>
        /*
            模块化开发

                一个js文件就是一个模块--一个模块 -这模块中 定义很多的个函数
                 我们可以把这个文件中某几个函数引入到另一个js文件中。

                 es6以前，只能把js文件引入 到html页面中


               模块化开发 核心 两个
                    模块功能主要由两个命令构成：
                     export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
                导出
                    // export 导出
                    // 一个个文件就是一个模块
                    // 模块里面定义的所有变量 ，外部无法直接使用
                    // ****想要被外部使用，必须导出对应的功能（函数-变量）
                    // 语法 export {变量名}
                    // export function box(){}   import {box} form ''
                    // export var a =1;  - import {a} from ''
                    export defalue fn; 默认导出  import bad from ''     
                        默认导出 只有一个，导入的时候不用管名字

                导入 
                    // 一个a.js中，想要用 b.js 这个模块中的功能
                    // 通过import 导入 想要使用的功能
                    // 语法 import {变量名} from '引入模块的路径'

                    // ps：导入的变量名必须要导出的变量名一样，否者就会报错
                    // ps: 路径必须是要给相当于或者绝对路径，以后可以直接模块名
                
               在页面中运行js文件文件
                引入a.js文件，并且 给script标签 加 type="module" 才可以     
                	
        */
    </script>

</body>

</html>